<!DOCTYPE html>  
<html>  
<head lang="en">  
  <meta charset="UTF-8">  
  <title></title>  
  <style>  
    #container {  
      border: 1px solid #aaa;  
      border-radius: 3px;  
      padding: 10px;  
      margin: 10px;  
      min-height: 400px;  
    }  
  </style>  
</head>  
<body>  
  
  <h1>拖放API的扩展知识</h1>  
  <h3>请拖动您的照片到下方方框区域</h3>  
  <div id="container"></div>  
  
  <script>  
    //监听document的drop事件——取消其默认行为：在新窗口中打开图片  
    document.ondragover = function(e){  
      e.preventDefault(); //使得drop事件可以触发  
    }  
    document.ondrop = function(e){  
      e.preventDefault(); //阻止在新窗口中打开图片，否则仍然会执行下载操作！！！  
    }  
  
    //监听div#container的drop事件，设法读取到释放的图片数据，显示出来  
    container.ondragover = function(e){  
      e.preventDefault();  
    }  
    container.ondrop = function(e){  
      console.log('客户端拖动着一张图片释放了...')  
      //当前的目标对象读取拖放源对象存储的数据  
      //console.log(e.dataTransfer); //显示有问题  
      //console.log(e.dataTransfer.files.length); //拖进来的图片的数量  
      var f0 = e.dataTransfer.files[0];  
      //console.log(f0); //文件对象 File  
  
      //从文件对象中读取数据  
      var fr = new FileReader();  
      //fr.readAsText(f0); //从文件中读取文本字符串  
      fr.readAsDataURL(f0); //从文件中读取URL数据  
      fr.onload = function(){  
        console.log('读取文件完成')  
        console.log(fr.result);  
        var img = new Image();  
        img.src = fr.result; //URL数据  
        container.appendChild(img);  
      }  
    }  
  
  </script>  
</body>  
</html>